<template>
  <div class="app-container">
    <div class="zd3">
      <div class="zd3-title">
        <p>
          <span>资产名称</span>
          <el-input v-model="search.propertyName" type="text" class="userselect" placeholder="请输入资产名称" />
        </p>
        <p>
          <span>资产状态</span>
          <el-select v-model="search.status" clearable placeholder="请选择资产状态" class="userselect">
            <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </p>
        <p>
          <span>资产类别</span>
          <el-cascader
            :options="zichanfenlei"
            v-model="search.propertyType"
            :show-all-levels="false"
            class="userselect"
            :props="{ checkStrictly: true, value:'id',label: 'name', children:'depositoryDtoList' }"
            clearable></el-cascader>
        </p>
        <el-button size="small" type="success" @click="getList">查询</el-button>
        <el-button size="small" @click="resetList">重置</el-button>
        <el-button size="small" type="primary" @click="addPeople">新增</el-button>
        <el-upload
          class="upload-demo"
          action=""
          :show-file-list="false"
          :http-request="designUpFile"
          :multiple='false'
          >
          <el-button size="small" type="primary" style="margin-left:10px">导入</el-button>
        </el-upload>
      </div>

      <div class="zd3-btm">
        <!-- <div class="addDate" @click="addPeople">+ 新增成员</div> -->
        <el-table :data="tableData" style="width: 100%;border-radius: 8px;" height="510" border v-loading="loading">
          <el-table-column type="index" align="center" width="50" label="序号"/>
          <el-table-column align="center" prop="status" width="70" label="状态">
            <template slot-scope="scope">
              <div
                class="status"
                :class="scope.row.status == '使用中' ? 'green' : scope.row.status == '闲置' ? 'yellow' : scope.row.status == '已清理' ? 'red' : scope.row.status == '借用' ? 'blue' : scope.row.status == '维修中' ? 'blue' : scope.row.status == '报修中' ? 'yellow' : 'green'"
              >{{scope.row.status}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="照片">
            <template slot-scope="scope">
              <img :src="scope.row.imgurl" alt="" class="avatar">
            </template>
          </el-table-column>
          <el-table-column align="center" label="二维码">
            <template slot-scope="scope">
              <img :src="scope.row.erweima" alt="" class="avatar">
            </template>
          </el-table-column>
          <el-table-column align="left" prop="propertySn" width="150" label="资产SN编码" />
          <el-table-column align="left" prop="propertyName" width="150" label="资产名称" />
          <el-table-column align="left" prop="pinpai" width="150" label="品牌" />
          <el-table-column align="left" prop="propertyType" width="150" label="资产类别" />
          <el-table-column align="left" prop="propertyGuige" width="150" label="资产规格" />
          <el-table-column align="left" prop="weihao" width="150" label="位号" />
          <el-table-column align="left" prop="xuhao" width="150" label="设备序列号" />
          <el-table-column align="left" prop="bianma" width="150" label="设备生产编码" />
          <el-table-column align="left" prop="countingUnit" width="150" label="计数单位" />
          <el-table-column align="left" prop="powers" width="150" label="设备性能参数" />
          <el-table-column align="left" prop="caizhi" width="150" label="材质" />
          <!-- <el-table-column align="left" prop="canshu" width="150" label="设备参数" /> -->
          <el-table-column align="center" width="200" label="设备参数" >
						<template slot-scope="scope">
							<div class="ellisp">{{scope.row.canshu}}</div>
						</template>
					</el-table-column>
          <el-table-column align="left" prop="runhua" width="150" label="润滑方式" />
          <el-table-column align="left" prop="baoyang" width="150" label="保养类型" />
          <el-table-column align="left" prop="propertyJine" width="100" label="金额" />
          <el-table-column align="left" prop="propertyNums" width="80" label="数量" />
          <el-table-column align="left" prop="purchaseTime" width="100" label="购买时间" />
          <el-table-column align="left" prop="companys" width="150" label="使用公司" />
          <el-table-column align="left" prop="departments" width="100" label="使用部门" />
          <el-table-column align="left" prop="usePerson" width="100" label="使用人" />
          <el-table-column align="left" prop="jianxiuren" width="100" label="检修人" />
          <el-table-column align="left" prop="jixiugong" width="100" label="机修工" />
          <el-table-column align="left" prop="weixiuren" width="100" label="维修人" />
          <el-table-column align="left" prop="areas" width="150" label="区域名称" />
          <el-table-column align="left" prop="storeAreas" width="150" label="存放地址" />
          <el-table-column align="left" prop="belongCompany" width="150" label="所属公司" />
          <el-table-column align="left" prop="suppliers" width="150" label="供应商" />
          <el-table-column align="left" prop="serviceLife" width="100" label="使用期限" />
          <el-table-column align="left" prop="sourceOf" width="100" label="来源" />
          <el-table-column align="left" prop="remarks" width="150" label="备注" />
          <!-- <el-table-column align="center" prop="baofei" label="作废人" /> -->
          <el-table-column align="center" width="230" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="look(scope.row, scope.$index)">查看</el-button>
              <el-button type="text" size="small" @click="write(scope.row, scope.$index)">编辑</el-button>
              <el-button type="text" size="small" v-if="scope.row.statics == 3" @click="sureIn(scope.row, scope.$index)">入库</el-button>
              <el-popconfirm
                placement="top"
                hideIcon
                title="是否要删除此行？"
                @onConfirm="deleteRow(scope.row)"
              >
                <el-button type="text" size="small" slot="reference">删除</el-button>
              </el-popconfirm>
              <el-button type="text" size="small" v-if="!scope.row.erweima" @click="getEwm(scope.row)">生成二维码</el-button>
              <el-button type="text" size="small" v-if="scope.row.erweima" @click="dayin(scope.row)">打印二维码</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          align="right"
          layout="prev, pager, next"
          :page-size="50"
          :total="total"
          @current-change="goPage"
          @prev-click="goPrev"
          @next-click="goNext"
        />
      </div>
    </div>
    <!-- 打印二维码 -->
    <el-dialog
      :visible.sync="ewmShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="true"
      width="70"
    >
      <div id="ewmdayin">
        <img :src="ewmimg" alt />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ewmShow = false">取消</el-button>
        <el-button type="primary" v-print="'#ewmdayin'">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addRuku, updateRuku, rukuList, selectWeishiyong, deleteRuku, createEwm, getSeting, getFenlei,importZichan } from "@/api/caigou";
import { bumenScEwm } from '@/api/bumen'
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isShow: true,
      search: {
        currentPage: 1,
      },
      company: [],   //公司搜索数组
      total: 1,
      showHeader: false,
      loading: true,
      selectedOptions: [],
      tableData: [], //进货单
      dialogVisible: false,
      ewmShow: false,    //二维码显示状态
      ewmimg: '',   //显示二维码
      tempData: "",
      tempIndex: -1,
      options: [
        {
          name: "使用中",
          value: "0",
        },
        {
          name: "闲置",
          value: "1",
        },
        {
          name: "借用",
          value: "3",
        },
        {
          name: "报修中",
          value: "6",
        },
        {
          name: "维修中",
          value: "4",
        },
        {
          name: "已清理",
          value: "5",
        },
      ],
      zichanfenlei: [],  //资产分类
      value: "",
      djtime: "",
    };
  },
  mounted() {
    this.getList()
    this.getSet()
    this.getClassify()
  },
  methods: {
    getSet(){
      getSeting({}).then(res => {
        // status 1代表公司类型,2.地区名称,3.存放仓库,4.来源,5.资产类型,6.使用期限,7.供应商,8.巡检周期 
        console.log('seting',res)
        // 公司类型
        this.company = res.data.filter(item => item.status === '1')
      })
    },
    // 获取资产分类
    getClassify(){
      getFenlei({}).then(res => {
        console.log('分类',res)
        this.zichanfenlei = res.data
      })
    },
    // 获取进货单
    getList() {
      this.loading = true
      this.search.propertyType = this.search.propertyType ? this.search.propertyType[this.search.propertyType.length-1] : null
      selectWeishiyong(this.search).then((res) => {
        console.log(res);
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false;
      });
    },
    // 生成二维码
    getEwm(item) {
      console.log(item);
      createEwm({ id: item.oid }).then(res => {
        console.log(res);
        return new Promise((resolve,rejects) => {
          resolve(res)
        })
      }).then(res => {
        item.erweima = res.data
        console.log('生成二维码',item)
        updateRuku(item).then(res => {
          console.log(res)
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.getList()
        })
      })
    },
    // 导入文件
    designUpFile(item){
      const loading = this.$loading({
        lock: true,
        text: '上传中请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      })
      var formData = new FormData()
      formData.append("file", item.file)
      importZichan(formData).then(res => {
        console.log(res)
        this.getList()
        this.$notify({
          title: '成功',
          message: `成功导入${res.data}条数据！`,
          type: 'success',
          duration: 0
        });
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    // 显示打印二维码窗口
    dayin(item) {
      console.log(item);
      this.ewmShow = true;
      this.ewmimg = item.erweima;
    },
    chaxun() {
      if (this.propertyName == "") {
        this.getList();
      } else {
        rukuList(this.propertyName).then((res) => {
          console.log(res);
        });
      }
    },
    // 添加子设备
    addChildren(item){
      this.$router.push({
        name: 'Writezishebei'
      })
      sessionStorage.setItem('fushebei',JSON.stringify(item))
    },
    // 查看子分类
    lookChildren(item){
      this.$router.push({
        name: 'Zishebei'
      })
      sessionStorage.setItem('fushebei',JSON.stringify(item))
    },

    // 查看详情
    look(item, index) {
      console.log(item, index);
      this.$router.push({
        name: "Zichanmingxi",
        params: {
          options: JSON.stringify(item),
          zichan: true
        },
      });
    },
    bindShow() {
      this.isShow = !this.isShow;
    },
    // 编辑操作
    write(item, index) {
      console.log(item);
      this.$router.push({
        name: "Addruku",
        params: {
          options: JSON.stringify(item),
        },
      });
    },
    // 删除操作
    deleteRow(item) {
      console.log(item);
      console.log("删除");
      deleteRuku(item.oid).then((res) => {
        console.log(res);
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getList();
      });
    },
    goPage(page) {
      this.search.currentPage = page;
      this.getList();
    },
    goPrev(page) {
      console.log(page);
      this.search.currentPage--;
      this.getList();
    },
    goNext(page) {
      this.search.currentPage++;
      this.getList();
      console.log(page);
    },
    resetList() {
      this.search = {
        currentPage: 1,
      };
      // this.getList()
    },
    // 新增入库单
    addPeople(item) {
      this.$router.push({ name: "Addruku" });
    },
  },
};
</script>

<style lang="scss" scoped>
.morehandle {
  display: flex;
  flex-direction: column;
}
#ewmdayin {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  > img {
    width: 300px;
    height: 300px;
  }
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.app-container {
  padding: 10px;
}
.ellisp{
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-align: center;
}
.zd3-title {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);

  > p {
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    margin-right: 20px;
    /deep/.el-input__inner {
      background: none;
      height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      flex: 1;
    }

    > span {
      display: block;
      width: 100px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }

  > h3 {
    // width: 64px;
    height: 32px;
    background: #18a05e;
    border-radius: 3px;
    margin: 0 30px 0 0;
    padding: 0 15px;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h4 {
    padding: 0 15px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }
}
.orderStatus {
  display: flex;
  justify-content: center;
  > p {
    padding: 0px 5px;
    color: #fff;
    border-radius: 2px;
    margin: 0 0px 0 0;
  }
  .blue {
    background: #3a87ad;
  }
  .green {
    background: #18a05e;
  }
  .yellow {
    background: #ff7a0e;
  }
  .red {
    background: #c60000;
  }
}
.avatar{
	width: 30px;
	height: 30px;
}

.status {
  border-radius: 3px;
  font-size: 12px;
  width: 45px;
  text-align: center;
  color: #fff;
  background: #777777;
  margin: 0 auto;
}
.status-active {
  background: #18a05e;
}
.inps {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: #333;
}
.inps-active {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  // background:#ccc;
  border: none;
  color: #333;
}

.btns {
  display: flex;
  align-items: center;
  margin-left: 10px;
  /*position: absolute;
	right: 20px;
	bottom: 5px;*/
  > h3 {
    width: 64px;
    height: 32px;
    background: #18a05e;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h4 {
    width: 64px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    // color: #fff;
    margin: 0 30px 0 30px;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h5 {
    color: #18a05e;
    font-size: 14px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
    margin: 0 20px;
    > i {
      right: 0px;
      margin-top: -5px;
    }
  }
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #18a05e;
  color: #fff;
}
.zd3-btm /deep/.btn-prev:after {
  content: "上一页";
}
.zd3-btm /deep/.btn-next:before {
  content: "下一页";
}
.zd3-btm /deep/.btn-prev,
.zd3-btm /deep/.btn-next {
  width: 65px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  /deep/.el-button--text[data-v-318d347c] {
    margin: 0 10px;
  }
  /deep/.el-table td{
    padding: 5px 0 !important;
  }
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
    white-space: nowrap;
    padding: 15px 5px;
    color: #303133;
    font-weight: bold;
  }

  .el-button--text {
    margin: 0 5px;
  }
}
.red {
  background: #ff0000;
}
.green {
  background: #18a05e;
}
.yellow {
  background: #f8c419;
}
.blue {
  background: #078fff;
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
</style>
